<!--  -->
<template>
  <div class="container">
    <div class="top_title">单项练习磨刀枪，综合演练上战场，擂台竞技比高下，鏖战数学练兵网！</div>
    <div class="switch">
      <span class="switch_item">转到单项练习</span>
      <span class="switch_item">转到擂台竞技</span>
      <span class="switch_item">转到一课一练</span>
      <span class="switch_item" @click="goHome">转到首页</span>
    </div>
    <div class="select">
      <div class="grade">
        <span class="grade_item">上册</span>
        <span class="grade_item">下册</span>
      </div>
      <div class="classes">
        <!-- <span class="classes_item">二1班</span>
        <span class="classes_item">二2班</span>
        <span class="classes_item">二3班</span>
        <span class="classes_item">二4班</span>
        <span class="classes_item">二5班</span>
        <span class="classes_item">二6班</span>
        <span class="classes_item">二7班</span>
        <span class="classes_item">二8班</span>
        <span class="classes_item">二9班</span>
        <span class="classes_item">二1班</span>
        <span class="classes_item">二2班</span>
        <span class="classes_item">二3班</span>
        <span class="classes_item">二4班</span>
        <span class="classes_item">二5班</span>
        <span class="classes_item">二6班</span>
        <span class="classes_item">二7班</span>
        <span class="classes_item">二8班</span>
        <span class="classes_item">二9班</span>
        <span class="classes_item">二1班</span>
        <span class="classes_item">二2班</span>
        <span class="classes_item">二3班</span> -->
        <span class="classes_item" v-for="item in classes" :key="item.id">
            {{ item }}
        </span>
      </div>
    </div>
    <div class="theme">
      <span>数学练兵网——单项练习</span>
      <br />
      <div class="tip">
        （试练是公用的
        <button class="btn" @click="goTest()">试练</button>不保存个人成绩）
      </div>
    </div>
    <div class="ranking">排行榜</div>
    <div class="latest">最新记录</div>

    <div class="singletitle">
      <span class="title1">单 项 练 习</span>
      <br />
      <span class="title2">（速度/正确率/练习次数）</span>
    </div>
    <div class="topic">
      <div class="topic_item" v-for="(item,index) in topicList" :key="index">
        <i class="el-icon-tickets icon"></i>
        {{item}}
      </div>
    </div>

    <!-- <router-link :to="{name: '/exe2'}">LinkTitle</router-link>
    <div @click="goExe2">goExe2</div>-->
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      topicList: [
        "读数",
        "写数",
        "比一比",
        "几位数",
        "规律填数",
        "重复规律",
        "加法横式",
        "减法横式",
        "加法无提示",
        "减法无提示",
        "余数",
        "余数除法填空",
        "余数除法应用",
        "读数",
        "写数",
        "比一比",
        "几位数",
        "规律填数",
        "重复规律",
        "加法横式",
        "减法横式",
        "加法无提示",
        "减法无提示",
        "余数",
        "余数除法填空",
        "余数除法应用"
      ],
      classes: [
        "二1班",
        "二2班",
        "二3班",
        "二4班",
        "二5班",
        "二6班",
        "二7班",
        "二8班",
        "二9班",
        "二1班",
        "二2班",
        "二3班",
        "二4班",
        "二5班",
        "二6班",
        "二7班",
        "二8班",
        "二9班",
        "二1班",
        "二2班",
        "二3班"
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    goTest() {
      // console.log(item);
      this.$router.push({ path: "/grade2-exe" });
    },
    back() {
      this.$router.go(-1);
    },
    goExe2() {
      this.$router.push({ path: "/exe2" });
    }
  },
  created() {
    this.name = this.$route.query.name;
  }
};
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 1px;
  background-color: #ffffff;

  .singletitle {
    text-align: center;
    .title1 {
      font-weight: bold;
      font-size: 30px;
    }
    .title2 {
      font-size: 20px;
    }
  }
  .topic {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #f1faff;
    margin: 40px 80px;
    .topic_item {
      width: 20%;
      font-size: 30px;
      margin: 20px 35px;
      .icon {
        font-size: 35px;
        color: #e5bf50;
      }
    }
  }

  .top_title {
    background-color: #68a1ce;
    height: 180px;
    font-size: 50px;
    text-align: center;
    padding-top: 55px;
  }
  .switch {
    background-color: #f1faff;
    display: flex;
    justify-content: space-around;
    margin: 30px 80px;
    .switch_item {
      font-size: 28px;
      margin: 30px;
      padding: 10px;
      background-color: #e5bf50;
      border-radius: 50px;
    }
  }
  .select {
    display: flex;
    flex-direction: row;
    font-size: 20px;
    margin: 40px 80px;
    background-color: #f1faff;
    justify-content: space-around;
    .grade {
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      .grade_item {
        margin: 10px;
        background-color: #e5bf50;
        border-radius: 15px;
        padding: 5px;
      }
    }
    .classes {
      display: flex;
      flex-wrap: wrap;

      .classes_item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 20px;
        padding: 15px;
        background-color: #e5bf50;
      }
    }
  }
  .theme {
    text-align: center;
    span {
      font-size: 30px;
      font-weight: bold;
    }
    .tip {
      font-size: 20px;
      margin: 10px 0;
      .btn {
        background-color: deepskyblue;
      }
    }
  }
  .ranking {
    background-color: #f1faff;
    margin: 40px 80px;
  }
  .latest {
    background-color: #f1faff;
    margin: 40px 80px;
  }
}
</style>